<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
      width: 29%;
      /*height: auto;*/
      /*overflow-x: auto;*/
      display: inline-block;
      font-size: 12px;
      padding-left: 10px;
      /*background: #fafafa;*/
      /*background-image:url("../../../assets/image/icon-loading.png");*/
      /*background-size: cover;*/
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
        font-size: 14px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<template>
      <div class="app-container">
<!--        <el-page-header @back="$router.push({path: '/bill/sellform'})" content="销售订单详情">-->
<!--        </el-page-header>-->

        <div class="rj-wrap">
          <div id="viewSell" :style="contLeftStyle">
            <div class="cont-box" style="margin-top: 5px;">
              <p class="cont-tit">基础信息</p>
              <div>
                <div class="rj-cell max"><label>订单编号：</label><span>{{sellform.sellcode}}</span></div>
                <div class="rj-cell max"><label>申请人：</label><span>{{sellform.applyname}}</span> <span>{{sellform.depname}}</span></div>
                <div class="rj-cell max"><label>销售组织：</label><span>{{sellform.orgName}}</span></div>
                <div class="rj-cell"><label>订单类型：</label><span>{{sellform.flagname}}</span><span>{{sellform.flag == 3 ? '[' + sellform.parentcode + ']' : ''}}</span></div>
                <div class="rj-cell"><label>付款方式：</label><span>{{sellform.paytypename}}</span></div>
                <div class="rj-cell"><label>出货方式：</label><span>{{sellform.innerOut==1?'内部出货':'其他责任主体出货'}}</span></div>
                <div class="rj-cell"><label>配送方式：</label><span>{{sellform.deliverytypename}}</span></div>
                <div class="rj-cell"><label>结算币种：</label><span>{{sellform.currency == 2 ? '美元' : '人民币'}}</span></div>
                <div class="rj-cell"><label>计价方式：</label><span>{{sellform.settletypename}}</span></div>
              </div>
<!--              <div>-->
                <div class="rj-cell"><label>客户：</label><span>{{sellform.customername}}</span> <span v-if="customer != null">{{customer.typename}}</span></div>

<!--              </div>-->
<!--              <div>-->
                <div class="rj-cell"><label>货品类型：</label><span>{{sellform.quitSRTypeName}}</span></div>

                <div class="rj-cell" v-if="sellform.rechargeCode"><label>充值订单编号：</label><span>{{sellform.rechargeCode}}</span></div>
<!--                <div class="rj-cell" v-if="sellform.settletype == 1"><label>订单件数：</label><span>{{sellform.orderpack}}</span></div>-->
<!--                <div class="rj-cell" v-if="sellform.settletype == 1 && sellform.handselcount != ''"><label>赠送件数：</label><span>{{sellform.handselcount}}</span></div>-->
<!--                <div class="rj-cell"><label>订单重量：</label><span>{{sellform.orderweight}} 吨</span></div>-->
<!--                <div class="rj-cell" v-if="sellform.handselweight != '' && sellform.handselweight != null"><label>赠送重量：</label><span>{{sellform.handselweight}} 吨</span></div>-->
<!--              </div>-->
<!--              <div>-->
                <div class="rj-cell"><label>要求发货日期：</label><span>{{sellform.senddate}}</span></div>
                <div class="rj-cell"><label>要求到货日期：</label><span>{{sellform.arrivedate}}</span></div>
<!--              </div>-->
              <div class="rj-cell" v-if="sellform.paytype==3"><label>预计账期：</label><span>{{sellform.settlebilling}}天</span></div>
              <div class="rj-cell" v-if="sellform.paytype==3"><label>实际账期：</label><span>{{ attachUnit(sellform.actualPaymentDays, '天') }}</span></div>
              <div class="rj-cell"><label>回款状态：</label><span>{{sellform.moneybackStatusName}}</span></div>
              <div class="rj-cell"><label>状态：</label><span>{{sellform.statusname}}</span></div>
              <div class="rj-cell"><label>备注：</label><span>{{sellform.remarks}}</span></div>
              <div class="rj-cell"><label>创建时间：</label><span>{{sellform.createtime}}</span></div>
              <div class="rj-cell" v-if="orderfiles.length > 0"><label>附件：</label>
                <a target="_blank" v-for="(item, index) in orderfiles" :href="item.url" style="padding: 0 5px;">
                  <span>{{item.filename}}</span>
                </a>
              </div>
            </div>
            <div class="cont-box">
              <p class="cont-tit">收发货信息</p>
              <div>
                <div class="rj-cell">
                  <label>库房：</label>
                  <span>{{sellform.storeroomname}}</span>
                  <span v-if="sellform.storeOrgName"> - {{sellform.storeOrgName ? sellform.storeOrgName : ''}}</span>
                </div>
              </div>
              <div>
                <div class="rj-cell">
                  <label>发货地址：</label>
                  <span>{{sellform.deliProvince}} {{sellform.deliCity}} {{sellform.deliDistrict}} {{sellform.deliAddress}}</span>
                </div>
                <div class="rj-cell">
                  <label>发货联系人：</label>
                  <span>{{sellform.deliContact}} </span>
                  <span>{{sellform.deliContactNo}}</span>
                </div>
<!--              </div>-->
<!--              <div>-->
                <div class="rj-cell">
                  <label>收货地址：</label>
                  <span>{{sellform.arriProvince}} {{sellform.arriCity}} {{sellform.arriDistrict}} {{sellform.arriAddress}}</span>
                </div>
                <div class="rj-cell">
                  <label>收货联系人：</label>
                  <span>{{sellform.arriContact}} </span>
                  <span>{{sellform.arriContactNo}}</span>
                </div>
              </div>
            </div>
<!--            <div class="cont-box">-->
<!--              <p class="cont-tit">货运路线</p>-->
<!--              <div>-->
<!--                <div class="rj-cell">-->
<!--                  <label>发货地址：</label>-->
<!--                  <span>{{wlinfo.deliprovince + wlinfo.delicity + wlinfo.delidistrict + wlinfo.deliaddress}}</span>-->
<!--                </div>-->
<!--                <div class="rj-cell">-->
<!--                  <label>发货联系人：</label>-->
<!--                  <span>{{wlinfo.delicontact}}</span>-->
<!--                  <span>{{wlinfo.delicontacttel}}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>收货地址：</label>-->
<!--                <span>{{wlinfo.arriprovince + wlinfo.arricity + wlinfo.arridistrict + wlinfo.arriaddres}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>收货联系人：</label>-->
<!--                <span>{{wlinfo.arricontact}}</span>-->
<!--                <span>{{wlinfo.arricontactno}}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="cont-box" v-if="wlinfo1 != '' && wlinfo1.carcode != ''">-->
<!--              <p class="cont-tit">陆运信息</p>-->
<!--              <div class="rj-cell">-->
<!--                <label>承运人：</label>-->
<!--                <span>{{wlinfo1.carcode}}</span>-->
<!--                <span>{{wlinfo1.drivername}}</span>-->
<!--                <span>{{wlinfo1.driverphone}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>物流公司：</label>-->
<!--                <span>{{wlinfo1.customername}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>车型：</label>-->
<!--                <span>{{wlinfo1.carType}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>装车时间：</label>-->
<!--                <span>{{wlinfo1.loadtime}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>卸货时间：</label>-->
<!--                <span>{{wlinfo1.unloadtime}}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="cont-box" v-if="wlinfo2 != ''">-->
<!--              <p class="cont-tit">-->
<!--                海运信息-->
<!--                <a :href="'/sales/Sellform!exportDCWTS.action?orderid=' + sellform.guid" style="">打印订舱委托书 >></a>-->
<!--              </p>-->
<!--              <div class="rj-cell">-->
<!--                <label>物流公司：</label>-->
<!--                <span>{{wlinfo2.customername}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>运输方式：</label>-->
<!--                <span>{{sellform.transTypeName}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>货柜号：</label>-->
<!--                <span>{{wlinfo2.containerNo}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>发货港口：</label>-->
<!--                <span>{{wlinfo2.deliPort}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>收货港口：</label>-->
<!--                <span>{{wlinfo2.arriPort}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>收货港所属国家：</label>-->
<!--                <span>{{wlinfo2.arriPortCountry}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>海运环境：</label>-->
<!--                <span>{{wlinfo2.environment}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>提单类型：</label>-->
<!--                <span>{{wlinfo2.lifttypename}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>贸易条款：</label>-->
<!--                <span>{{wlinfo2.transClause}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>货运船公司：</label>-->
<!--                <span>{{wlinfo2.shipCompany}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>船名称：</label>-->
<!--                <span>{{wlinfo2.shipname}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>航次：</label>-->
<!--                <span>{{wlinfo2.shipCode}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>提单号：</label>-->
<!--                <span>{{wlinfo2.liftCode}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>箱型：</label>-->
<!--                <span>{{wlinfo2.boxType}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>箱数：</label>-->
<!--                <span>{{wlinfo2.boxSize}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>开船日期：</label>-->
<!--                <span>{{wlinfo2.loadtime}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>集装箱号：</label>-->
<!--                <span>{{wlinfo2.boxCode}}</span>-->
<!--              </div>-->
<!--              <div class="rj-cell">-->
<!--                <label>备注：</label>-->
<!--                <span>{{wlinfo2.remark}}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="cont-box" v-if="wlinfo3 != ''">-->
<!--              <p class="cont-tit">物流信息</p>-->
<!--              <div class="rj-cell">-->
<!--                <label>快递公司：</label>-->
<!--                <span>{{wlinfo3.customername}}</span>-->
<!--              </div>-->
<!--            </div>-->
            <div class="cont-box">
              <p class="cont-tit">货品信息</p>
              <el-table :data="allItems" border v-loading="loading">
                <el-table-column label="品种" prop="productname" align="center" width="140"/>
                <el-table-column label="规格" align="center" prop="spname"/>
                <el-table-column label="单价" align="center" prop="price" width="130" v-if="showprice">
                  <template slot-scope="scope">
                    <span>{{scope.row.price}} {{sellform.settletype == 1 ? packUnit(scope.row.unit, sellform.currency) : sellform.currency == 2 ? '美元/吨' : '元/吨'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="内部价" align="center" prop="innerPrice" width="130" v-if="showprice">
                  <template slot-scope="scope">
                    <span v-if="scope.row.innerPrice">{{scope.row.innerPrice}} {{sellform.settletype == 1 ? packUnit(scope.row.unit, sellform.currency) : sellform.currency == 2 ? '美元/吨' : '元/吨'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="订单数量" align="center" prop="" width="80">
                  <template slot-scope="scope">
                    <span>{{scope.row.flag == 2 ? scope.row.orderpack : scope.row.weight}} {{scope.row.unit}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="赠送数量" align="center" prop="" v-if="sellform.settletype == 1 && sellform.paytype < 4" width="80">
                  <template slot-scope="scope">
                    <span>{{attachUnit2(scope.row.handselcount,scope.row.unit)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark"/>
              </el-table>
<!--              <div v-for="(item, index) in allItems" :key="item.guid" style="margin-bottom: 5px;">-->
<!--                <div>-->
<!--                  <div class="rj-cell">-->
<!--                    <label>品种：</label>-->
<!--                    <span>{{item.productname}}</span>-->
<!--                  </div>-->
<!--                  <div class="rj-cell">-->
<!--                    <label>规格：</label>-->
<!--                    <span>{{item.spname}}</span>-->
<!--                  </div>-->
<!--                  <div class="rj-cell">-->
<!--                    <label>单价：</label>-->
<!--                    <span>{{item.price}} {{sellform.settletype == 1 ? packUnit(item.unit, sellform.currency) : sellform.currency == 2 ? '美元/吨' : '元/吨'}}</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="rj-cell">-->
<!--                  <label>订单数量：</label>-->
<!--                  <span>{{item.flag == 2 ? item.orderpack : item.weight}} {{item.unit}}</span>-->
<!--                </div>-->
<!--                <div class="rj-cell" v-if="sellform.settletype == 1 && sellform.paytype < 4">-->
<!--                  <label>赠送数量：</label>-->
<!--                  <span>{{item.handselcount}} {{item.unit}}</span>-->
<!--                </div>-->
<!--&lt;!&ndash;                <div class="rj-cell" v-if="item.weight != '' && item.weight != undefined">&ndash;&gt;-->
<!--&lt;!&ndash;                  <label>订单重量：</label>&ndash;&gt;-->
<!--&lt;!&ndash;                  <span>{{item.weight}} {{item.stockunit}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="rj-cell" v-if="item.handselweight != '' && item.handselweight != undefined">&ndash;&gt;-->
<!--&lt;!&ndash;                  <label>赠送重量：</label>&ndash;&gt;-->
<!--&lt;!&ndash;                  <span>{{item.handselweight}}  {{item.stockunit}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                        <template v-if="sellform.status >= 60 && permission.permis.indexOf(7) > -1">&ndash;&gt;-->
<!--                &lt;!&ndash;                            <div class="rj-cell">&ndash;&gt;-->
<!--                &lt;!&ndash;                                <label>到货净重：</label>&ndash;&gt;-->
<!--                &lt;!&ndash;                                <span>{{item.unloadweight}} 吨</span>&ndash;&gt;-->
<!--                &lt;!&ndash;                            </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                            <div class="rj-cell">&ndash;&gt;-->
<!--                &lt;!&ndash;                                <label>包装重量：</label>&ndash;&gt;-->
<!--                &lt;!&ndash;                                <span>{{item.packweight}} kg</span>&ndash;&gt;-->
<!--                &lt;!&ndash;                            </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                            <div class="rj-cell">&ndash;&gt;-->
<!--                &lt;!&ndash;                                <label>扣杂率：</label>&ndash;&gt;-->
<!--                &lt;!&ndash;                                <span>{{item.deductrate}}</span>&ndash;&gt;-->
<!--                &lt;!&ndash;                            </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                        </template>&ndash;&gt;-->
<!--                <div>-->
<!--                  <div class="rj-cell">-->
<!--                    <label>备注信息：</label>-->
<!--                    <span>{{item.remark}}</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
            </div>

            <div class="cont-box"  v-if="packWhoutProducts.length>0">
              <p class="cont-tit">出库信息</p>
              <template v-if="sellform.settletype == 1">
                <!--                        <div class="rj-cell max">-->
                <!--                            <label>出库件数：</label>-->
                <!--                            <span>{{sellform.loadcount}}</span>-->
                <!--                        </div>-->
                <!--                        <div class="rj-cell max">-->
                <!--                            <label>赠送件数：</label>-->
                <!--                            <span>{{sellform.handselcount != '' ? sellform.handselcount : ''}}</span>-->
                <!--                        </div>-->
                <div class="outitems">
<!--&lt;!&ndash;                  <div class="rj-cell " v-for="(product, index) in allItems">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                    <span v-if="index == 0">出库/赠送(明细)：</span>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                    <span>{{product.productname}} {{product.spname}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span v-if="product.handselcount != undefined" style="float: right;padding-left: 10px;">{{product.loadcount != '' ? product.loadcount : 0}}/{{product.handselcount != '' ? product.handselcount : 0}} {{product.unit}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span v-else style="float: right;padding-left: 10px;">{{product.loadcount != '' ? product.loadcount : 0}} {{product.unit}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--                  <div class="rj-cell" style="display: block;max-width: 60%" v-for="(product, index) in packWhoutProducts">-->
<!--                    <span>{{product.product}} {{product.spename}}</span>-->
<!--                    <span style="float: right;" v-if="product.handsel">{{product.weight ? product.weight : 0}}/{{product.handselweight ? product.handselweight : 0}} {{product.stockunit}}</span>-->
<!--                    <span style="float: right;" v-else>{{product.weight ? product.weight : 0}} {{product.stockunit}}</span>-->
<!--                  </div>-->
                  <el-table :data="packWhoutProducts" border>
                    <el-table-column label="出库单号" align="center" prop="whoutcode" width="100"/>
                    <el-table-column label="出库时间" align="center" prop="createtime" width="100"/>
                    <el-table-column label="品种" align="center" prop="product" width="180"/>
                    <el-table-column label="规格" align="center" prop="spename"/>
                    <el-table-column label="数量" align="center" prop="weight"  width="130">
                      <template slot-scope="scope">
                        <span v-if="scope.row.handsel">{{scope.row.weight ? scope.row.weight : 0}}/{{scope.row.handselweight ? scope.row.handselweight : 0}} {{scope.row.stockunit}}</span>
                        <span v-else>{{scope.row.weight ? scope.row.weight : 0}} {{scope.row.stockunit}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
              <template v-if="sellform.settletype == 2">
<!--                <div class="rj-cell max">-->
<!--                  <label>出库重量：</label>-->
<!--                  <span>{{sellform.loadweight}} 吨</span>-->
<!--                </div>-->
                <div class="outitems">
<!--&lt;!&ndash;                  <div class="rj-cell " v-for="(product, index) in allItems">&ndash;&gt;-->
<!--&lt;!&ndash;                    <span v-if="index == 0">出库明细：</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span>{{product.productname}} {{product.spname}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <span style="float: right;padding-left: 5px;">{{product.loadweight != '' ? product.loadweight : 0}} {{product.unit}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--                  <div class="rj-cell " v-for="(product, index) in packWhoutProducts">-->
<!--                    <span>出库：{{product.product}} {{product.spename}}</span>-->
<!--                    <span style="float: right;padding-left: 5px;">{{product.weight != '' ? product.weight : 0}} {{product.stockunit}}</span>-->
<!--                  </div>-->
                  <el-table :data="packWhoutProducts" border>
                    <el-table-column label="出库单号" align="center" prop="whoutcode" width="100"/>
                    <el-table-column label="出库时间" align="center" prop="createtime" width="100"/>
                    <el-table-column label="品种" align="center" prop="product" width="150"/>
                    <el-table-column label="规格" align="center" prop="spename"/>
                    <el-table-column label="数量" align="center" prop="weight" width="100">
                      <template slot-scope="scope">
                        <span>{{scope.row.weight != '' ? scope.row.weight : 0}} {{scope.row.stockunit}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
              <!--                    <div class="rj-cell" v-if="JSON.stringify(unLoadWeightL) != '{}'">-->
              <!--                        <label>净重：</label>-->
              <!--                        <span>{{unLoadWeightL.weight + " 吨"}}</span>-->
              <!--                    </div>-->
              <!--                    <div class="rj-cell" v-if="JSON.stringify(unLoadWeightL) != '{}'">-->
              <!--                        <label>损耗：</label>-->
              <!--                        <span>{{sellform.shWeight + " 吨"}}</span>-->
              <!--                    </div>-->
              <!--                    <div v-if="JSON.stringify(loadWeightL) != '{}'">-->
              <!--                        <p style="font-size: 12px;color: #999;padding: 5px 10px;">发货过磅单:</p>-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>净重：</label>-->
              <!--                            <span>{{loadWeightL.weight}} 吨</span>-->
              <!--                        </div>-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>过磅人：</label>-->
              <!--                            <span>{{loadWeightL.operName}}</span>-->
              <!--                        </div>-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>过磅时间：</label>-->
              <!--                            <span>{{loadWeightL.createtime}}</span>-->
              <!--                        </div>-->
              <!--                    </div>-->
              <!--                    <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="JSON.stringify(loadWeightL) != '{}' && loadWeightL.imgs.length > 0">-->
              <!--                        <p class="exp" style="font-size: 12px;color: #999;padding: 5px 10px;">拉货过磅单:</p>-->
              <!--                        <div class="exp uploaderFiles" style="display: inline-block;">-->
              <!--                            <viewer :images="sellform.whoutform[0].imgs">-->
              <!--                                <img class="attachimg" style="padding-right: 5px;" v-for="(image, indx) in sellform.whoutform[0].imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/common/image/pic.png';this.onerror = null" :src="image.url + '.png'" >-->
              <!--                            </viewer>-->
              <!--                        </div>-->
              <!--                    </div>-->
              <!--                    <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="sellform.whoutform.length >0 && sellform.whoutform[0].imgs.length > 0">-->
              <!--                        <p class="exp" style="font-size: 12px;color: #999;padding: 5px 10px;">出库单:</p>-->
              <!--                        <div class="exp uploaderFiles" style="display: inline-block;">-->
              <!--                            <viewer :images="sellform.whoutform[0].imgs">-->
              <!--                                <img class="attachimg" style="padding-right: 5px;" v-for="(image, index) in sellform.whoutform[0].imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/common/image/pic.png';this.onerror = null" :src="image.url + '.png'" >-->
              <!--                            </viewer>-->
              <!--                        </div>-->
              <!--                    </div>-->
              <!--                    <p style="font-size: 12px;color: #999;padding: 5px 10px;" v-show="JSON.stringify(unLoadWeightL) != '{}'">卸货过磅单:</p>-->
              <!--                    <div v-show="JSON.stringify(unLoadWeightL) != '{}'">-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>净重：</label>-->
              <!--                            <span>{{unLoadWeightL.weight}} 吨</span>-->
              <!--                        </div>-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>过磅人：</label>-->
              <!--                            <span>{{unLoadWeightL.operName}}</span>-->
              <!--                        </div>-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>过磅时间：</label>-->
              <!--                            <span>{{unLoadWeightL.createtime}}</span>-->
              <!--                        </div>-->
              <!--                    </div>-->
              <!--                    <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="JSON.stringify(unLoadWeightL) != '{}' && unLoadWeightL.imgs.length > 0">-->
              <!--                        <p class="exp" style="font-size: 12px;color: #999;padding: 5px 10px;">拉货过磅单:</p>-->
              <!--                        <div class="exp uploaderFiles" style="display: inline-block;">-->
              <!--                            <viewer :images="sellform.whoutform[0].imgs">-->
              <!--                                <img class="attachimg" style="padding-right: 5px;" v-for="(image, index) in sellform.whoutform[0].imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/common/image/pic.png';this.onerror = null" :src="image.url + '.png'" >-->
              <!--                            </viewer>-->
              <!--                        </div>-->
              <!--                    </div>-->
            </div>

            <!--                <div class="cont-box" v-if="qaform.qacode != '' && qaform.qacode != null">-->
            <!--                    <p class="cont-tit">质检信息</p>-->
            <!--                    <div  >-->
            <!--                        <div class="rj-cell max">-->
            <!--                            <label><span style="font-size: 14px;padding: 0;">质检单编号：</span></label>-->
            <!--                            <span>{{qaform.qacode}}</span>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                    <div class="rj-cell max">-->
            <!--                        <label>抽检数量：</label>-->
            <!--                        <span>{{qaform.chkpknum}} 包</span>-->
            <!--                        <span> {{qaform.chkwght}} Kg</span>-->

            <!--                        <label>合格重量：</label>-->
            <!--                        <span> {{qaform.okweight}} Kg</span>-->
            <!--                    </div>-->
            <!--                    <div class="rj-cell max">-->
            <!--                        <label>不合格重量：</label>-->
            <!--                        <span> {{qaform.notokweight}} Kg</span>-->
            <!--                        <label>不合格率：</label>-->
            <!--                        <span> {{qaform.unqualifiedchkrate}}%</span>-->
            <!--                    </div>-->
            <!--                    <div class="rj-cell max">-->
            <!--                        <label>土杂重量：</label>-->
            <!--                        <span> {{qaform.soilchkweight}} Kg</span>-->
            <!--                        <label>土杂率：</label>-->
            <!--                        <span> {{qaform.soilchkrate}}%</span>-->
            <!--                    </div>-->
            <!--                    <div class="rj-cell max">-->
            <!--                        <label>合格率：</label>-->
            <!--                        <span> {{Number((100-qaform.deductrate)).toFixed(2)}} %</span>-->
            <!--                    </div>-->
            <!--                    <div class="rj-cell max">-->
            <!--                        <label>质检人：</label>-->
            <!--                        <span>{{qaform.operatorname}}</span>-->
            <!--                        <label>质检时间：</label>-->
            <!--                        <span>{{qaform.createdate}}</span>-->
            <!--                    </div>-->
            <!--                    <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="qaFormImg != undefined && qaFormImg.length > 0">-->
            <!--                        <p class="exp" style="font-size: 12px;color: #999;padding: 5px 10px;">质检单照片:</p>-->
            <!--                        <div class="exp uploaderFiles" style="display: inline-block;">-->
            <!--                            <viewer :images="sellform.whoutform[0].imgs">-->
            <!--                                <img class="attachimg" style="padding-right: 5px;" v-for="(image, index) in sellform.whoutform[0].imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/common/image/pic.png';this.onerror = null" :src="image.url + '.png'" >-->
            <!--                            </viewer>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <div class="cont-box" v-if="sellform.finalamount != null">
              <p class="cont-tit">结算信息</p>
              <div class="rj-cell max">
                <label>订单金额：</label>
                <span>{{sellform.amount}} {{sellform.currency == 2 ? '美元' : '元'}}</span>
              </div>
              <div class="rj-cell max">
                <label>结算金额：</label>
                <span>{{sellform.finalamount}}  {{sellform.currency == 2 ? '美元' : '元'}}</span>
              </div>
              <div class="rj-cell max">
                <label>有无折扣：</label>
                <span>{{sellform.isdiscount == 1 ? '有' : '无'}}</span>
              </div>
              <div class="rj-cell max">
                <label>折扣率：</label>
                <span>{{(toFix2(sellform.maxdeduct * 100)) + '%'}}</span>
              </div>

              <!--                    <div v-for="(item, index) in sellitems" :key="item.guid">-->
              <!--                        <div>-->
              <!--                            <div class="rj-cell">-->
              <!--                                <label>品种：</label>-->
              <!--                                <span>{{item.productname}}</span>-->
              <!--                            </div>-->
              <!--                            <div class="rj-cell">-->
              <!--                                <label>规格：</label>-->
              <!--                                <span>{{item.spname}}</span>-->
              <!--                            </div>-->
              <!--                            <div class="rj-cell">-->
              <!--                                <label>单价：</label>-->
              <!--                                <span>{{item.price}} {{sellform.settletype == 1 ? packUnit(item.unit, sellform.currency) : sellform.currency == 2 ? '美元/吨' : '元/吨'}}</span>-->
              <!--                            </div>-->
              <!--                        </div>-->
              <!--&lt;!&ndash;                        <div class="rj-cell" v-if="sellform.settletype == 1">&ndash;&gt;-->
              <!--&lt;!&ndash;                            <label>出库数量：</label>&ndash;&gt;-->
              <!--&lt;!&ndash;                            <span>{{item.loadcount}} {{item.unit}}</span>&ndash;&gt;-->
              <!--&lt;!&ndash;                        </div>&ndash;&gt;-->
              <!--                        <div class="rj-cell" v-if="sellform.settletype == 1">-->
              <!--                            <label>结算数量：</label>-->
              <!--                            <span>{{item.settlecount}} {{item.unit}}</span>-->
              <!--                        </div>-->
              <!--&lt;!&ndash;                        <div class="rj-cell" v-if="sellform.settletype == 1 && item.handselcount != ''">&ndash;&gt;-->
              <!--&lt;!&ndash;                            <label>赠送件数：</label>&ndash;&gt;-->
              <!--&lt;!&ndash;                            <span>{{item.handselcount}} {{item.unit}}</span>&ndash;&gt;-->
              <!--&lt;!&ndash;                        </div>&ndash;&gt;-->
              <!--&lt;!&ndash;                        <div class="rj-cell" v-if="sellform.settletype == 2">&ndash;&gt;-->
              <!--&lt;!&ndash;                            <label>出库重量：</label>&ndash;&gt;-->
              <!--&lt;!&ndash;                            <span>{{item.loadweight}} 吨</span>&ndash;&gt;-->
              <!--&lt;!&ndash;                        </div>&ndash;&gt;-->
              <!--                        <div class="rj-cell" v-if="sellform.settletype == 2">-->
              <!--                            <label>结算重量：</label>-->
              <!--                            <span>{{item.settleweight}} 吨</span>-->
              <!--                        </div>-->
              <!--&lt;!&ndash;                        <div class="rj-cell" v-if="sellform.settletype == 2 && item.handselweight != ''">&ndash;&gt;-->
              <!--&lt;!&ndash;                            <label>赠送重量：</label>&ndash;&gt;-->
              <!--&lt;!&ndash;                            <span>{{item.handselweight}} 吨</span>&ndash;&gt;-->
              <!--&lt;!&ndash;                        </div>&ndash;&gt;-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>结算金额：</label>-->
              <!--                            <span>{{item.settleamount}}</span>-->
              <!--                        </div>-->
              <!--                        <div class="rj-cell">-->
              <!--                            <label>回款金额：</label>-->
              <!--                            <span>{{sellform.backmoney}}</span>-->
              <!--                        </div>-->
              <!--                    </div>-->
            </div>
            <div class="cont-box" v-if="backinfo != ''">
              <p class="cont-tit">退换货信息</p>
              <div>
                <div class="rj-cell">
                  <label>退货类型：</label>
                  <span>{{backinfo.typename}}</span>
                </div>
                <template v-if="backinfo.type == 1">
                  <div class="rj-cell">
                    <label>退款金额：</label>
                    <span>{{backinfo.amount}}</span>
                  </div>
                  <div class="rj-cell">
                    <label>收款人：</label>
                    <span>{{backinfo.payee}}</span>
                  </div>
                  <div class="rj-cell">
                    <label>开户行：</label>
                    <span>{{backinfo.bank}}</span>
                  </div>
                  <div class="rj-cell">
                    <label>收款账号：</label>
                    <span>{{backinfo.bankaccount}}</span>
                  </div>
                </template>
                <template v-if="backinfo.type == 3">
                  <div class="rj-cell">
                    <label>补货金额：</label>
                    <span>{{backinfo.amount}}</span>
                  </div>
                  <div class="rj-cell">
                    <label>收款人：</label>
                    <span>{{backinfo.customername}}</span>
                  </div>
                </template>
                <div v-if="backinfo.type == 1 || backinfo.type == 3" class="rj-cell">
                  <label>付款方式：</label>
                  <span>{{backinfo.paytypename}}</span>
                </div>
                <div class="rj-cell">
                  <label>状态：</label>
                  <span>{{backinfo.statusname}}</span>
                </div>
              </div>
            </div>
          </div>

          <div :style="contRightStyle">
            <el-link type="primary" :underline="false" :icon="iconStyle" @click="showNodeChange"></el-link>
<!--            duration指定过度的持续时间单位为毫秒-->
            <Transition :duration="1000" name="nested">
              <div v-show="showNode" class="outer">
                <div class="inner">
                  <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id" ></FlowNode>
                </div>
              </div>
            </Transition>

<!--            <el-link type="primary" :underline="false" size="mini" @click="showNodeChange">{{showStyle.display==''?'收起':'展开'}}</el-link>-->
<!--            <div :style="showStyle">-->
<!--&lt;!&ndash;            <SalesOperationLogs2 :orderid="sellform.guid" :srguid="sellform.storermguid" :departid="sellform.depguid"></SalesOperationLogs2>&ndash;&gt;-->
<!--            <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id" ></FlowNode>-->
<!--            </div>-->
          </div>
        </div>
      </div>
</template>
<style>
.nested-enter-active, .nested-leave-active {
  transition: all 0.3s ease-in-out;
}
/* 延迟父元素的离开leave*/
.nested-leave-active {
  transition-delay: 0.25s;
}
.nested-enter-from,
.nested-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}
/* 嵌套元素延迟输入enter*/
.nested-enter-active .inner {
  transition-delay: 0.25s;
}
.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0.001;
}
</style>
<script>
    import {getMergedData} from '@/utils/mergedArray'
    import FlowNode from '@/components/FlowNode/index'
    import {getFileinfo, viewSellForm} from "@/api/bill/sellform";
    import {showPrice} from '@/api/public'

    let qs = require('qs');
    export default {
        name: 'sellforminfo',
        data () {
            return {
              loading:true,
              flowid: 34,
              id : '',
              sellform: '',
              wlinfos: {},
              wlinfo: '',
              wlinfo1: '',
              wlinfo2: '',
              wlinfo3: '',
              sellitems: [],
              whoutData:[],
              customer: '',
              hasWeightList: false,
              loadWeightL: {},
              unLoadWeightL: {},
              qaform:[],
              qaFormImg:[],
              orderfiles: [],
              permission: JSON.parse(sessionStorage.getItem('permissions')),
              backinfo: '',
              allItems: [],
              isReady: false,
              // formMergedArray:[],
              //三种方式实现flowNode的展开收起功能1.display2.transition标签3.style的transition属性
              // showStyle:{display:''},
              contLeftStyle:{
                width: '73%',
                //指定对象为行内块元素
                display: 'inline-block',
                fontSize: '14px',
                padding: '10px',
                //为元素加入宽度过渡效果时间为1秒
                transition:'width 1s',
                WebkitTransition:'width 1s',
                // hover:{width:'200px'}
              },
              contRightStyle:{
                width: '29%',
                display: 'inline-block',
                fontSize: '12px',
                paddingLeft: '10px',
                transition: 'width 1s',
                WebkitTransition: 'width 1s',
                // hover: {width:'200px'}
              },
              showNode:true,
              // iconStyle:'el-icon-arrow-down el-icon--right',
              iconStyle:'el-icon-s-unfold',
              showprice:'',
            }
        },
        components: {
          FlowNode,
        },
      computed: {
        packWhoutProducts: function () {
          // if (this.sellform.whoutforms){
            if (this.sellform.whoutforms.length>0){
              for (let i = 0; i < this.sellform.whoutforms[0].items.length; i++) {
                let item=this.sellform.whoutforms[0].items[i];
                item.whoutcode=this.sellform.whoutforms[0].whoutcode;
                item.createtime=this.sellform.whoutforms[0].createtime;
              }
              return this.sellform.whoutforms[0].items
            }else {
              return []
            }
          // }
          // return this.sellform.whoutforms[0].items ? this.sellform.whoutforms[0].items : [];
        },
        // whichFlow: function () {
        //   return this.sellform.flowtempguid == 2 ? this.sellform.status >= 45 : this.sellform.status >= 70;
        // }
      },
      created() {
            let that = this;
            this.id = this.$route.query.id;
            this.getOrder(this.id);
            this.getFiles();
            this.getShowPrice();
        },
        methods: {
          getShowPrice() {
            let data={
              id:34
            }
            showPrice(data).then(response=>{
              if (response.code==200){
                this.showprice=response.msg==1;
              }
            })
          },
          showNodeChange(){
            //获取当前页面宽度
            // let currentWidth=document.documentElement.clientWidth;
            this.showNode=!this.showNode;
            if (this.showNode){
              this.iconStyle='el-icon-s-unfold';
              this.contLeftStyle.width='73%';
              this.contRightStyle.width='29%';
            }else {
              // setTimeout(()=>{
              this.iconStyle='el-icon-s-fold'
              this.contLeftStyle.width='100%';
              this.contRightStyle.width='0%';
              // },1000
              // )
            }
          },

          // //合并单元格
          // transferData(){
          //   let data=[];
          //   this.packWhoutProducts.forEach((element,index)=>{
          //     let rows=[];
          //     rows.push(element.whoutcode);
          //     rows.push(element.whoutTime);
          //     rows.push(element.product);
          //     rows.push(element.spename);
          //     rows.push(element.weight);
          //     data.push(rows)
          //   })
          //   let colIndexs=[0,1];
          //   this.formMergedArray=[];
          //   getMergedData(data,0,colIndexs,this.formMergedArray);
          // },

          handleClickOutside() {
            this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
          },
            packUnit: function(unit, currency) {
                return unit != undefined && unit != '' ? currency == 2 ? '美元/' : '元/' + unit : '';
            },
            getFiles: function() {
                let that = this;
              getFileinfo({orderid: this.id}).then(response => {
                    if (response.code == 200) {
                        this.orderfiles = response.data;
                        console.log('orderfiles:', this.orderfiles)
                    } else {
                        //失败时不提示
                    }
                });
            },
            getOrder: function (id) {
                let that = this;
              viewSellForm({orderid: id}).
                // this.axios({
                //     method: 'get',
                //     url: '/bill/sellform/detail',
                //     params: {orderid: id}
                // }).
              then(response => {
                this.loading=false;
                    if (response.data.status == 'true') {
                        let res = response.data.result;
                        this.sellform = res;
                        console.log('sellform：', this.sellform)
                        this.sellitems = res.items;
                        this.allItems = this.sellform.spitems.concat(this.sellitems);

                      // this.allItems.map((item,index)=>{
                      //   if (this.sellform.whoutform){
                      //     let witem=this.sellform.whoutform.items[index];
                      //     item.whweight=witem.weight;
                      //     item.handsel=witem.handsel;
                      //     item.handselweight=witem.handselweight;
                      //     item.whstockunit=witem.stockunit;
                      //   }
                      //   console.log('item:-',item)
                      // })

                        this.customer = res.customer;
                        this.wlinfo = response.data.wlinfoaddress;
                        response.data.wlinfos.map(function (item) {
                            if (item.transtype == 1) {
                                that.wlinfo1 = item;
                            } else if (item.transtype == 2) {
                                that.wlinfo2 = item;
                            } else if (item.transtype == 3) {
                                that.wlinfo3 = item;
                            }
                        });

                        let weightLst = res.weightlist || '';

                        this.hasWeightList = weightLst.length > 0 ? true : false;
                        /**
                         2020-3-23
                         liukx
                         销售订单详情添加质检信息
                         */
                        let data = response.data;
                        this.qaform = data.qaForm != null ? data.qaForm : {};
                        this.qaFormImg = data.qaFormImg;

                        for (let i=0; i<weightLst.length; i++) {
                            switch (weightLst[i].wtype) {
                                case 1:
                                    this.loadWeightL = weightLst[i];
                                    break;
                                case 2:
                                    this.unLoadWeightL = weightLst[i];
                                    break;
                            }
                        }
                        //退换货信息
                        this.backinfo = res.backinfo != null ? (res.backinfo[0] || '') : '';
                        //具备展示节点列表条件
                        this.flowid = this.sellform.flowtempguid;
                        this.isReady = true;
                        // this.transferData()
                    } else if (response.data.status == 'true') {
                        this.msgError(response.data.result);
                    } else {
                        this.msgError('系统错误');
                    }
                });
            }
        }
    }
</script>
